<template>
	<view class="Management" v-if="data">
		<app-header title="管理">
			<!-- <i class="iconfont icon-lingdang" style="font-size: 40rpx;"></i> -->
		</app-header>
		<view class="Management-header">
			<view class="Management-header-left">
				<image src="@/static/imgs/cow.png" style="width: 125rpx;height: 125rpx;"></image>
				<view class="Management-header-left-item">
					<view>admin</view>
					<view>136000000000</view>
				</view>
			</view>
			<view class="Management-header-right">
				<navigator url="/pages/components/BasicInformation">
					<i class="iconfont icon-xiangyoujiantou" style="font-size: 40rpx;"></i>
				</navigator>
			</view>
		</view>
		<view class="Management-header-Data">
			<view class="Management-header-Data-item">
				<view style="font-size: 50rpx;">{{data.countNum}}</view>
				<view style="font-size: 25rpx;">牲畜数量</view>
			</view>
			<view class="Management-header-Data-item">
				<view style="font-size: 50rpx;">{{data.healthNum}}</view>
				<view style="font-size: 25rpx;">健康数量</view>
			</view>
			<view class="Management-header-Data-item">
				<view style="font-size: 50rpx; color: #FFBF40;">{{data.unHealthNum}}</view>
				<view style="font-size: 25rpx;">异常数量</view>
			</view>
		</view>
		<view class="Management-center">
			<navigator :url="`/${item.path}`" class="Management-center-btn" v-for="(item,index) in Btnlist"
				:key="index">
				<image :src="item.img" style="width: 90rpx;height: 90rpx;" />
				<view>{{item.title}}</view>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	import AppHeader from '@/pages/components/AppHeader.vue';
	import {
		ref,
		onMounted
	} from 'vue';
	import {HealthInfo} from '@/utils/api/Management.js';
	const data = ref(null)
	const Btnlist = [{
			img: '/static/manage/pasture.png',
			title: '牲畜信息',
			path: 'pages/management/child/components/Selection'
		},
		{
			img: '/static/manage/quarantine.png',
			title: '检疫管理',
			path: 'pages/management/child/quarantine/QuarantineManagement'
		},
		{
			img: '/static/manage/vaccine.png',
			title: '疫苗管理',
			path: 'pages/management/child/vaccine/VaccineManagement'
		},
		{
			img: '/static/manage/hybridization.png',
			title: '配种管理',
			path: 'pages/management/child/breeding/BreedingManagement'
		},
		{
			img: '/static/manage/breed.png',
			title: '繁殖管理',
			path: 'pages/management/child/mating/Matingmanagement'
		},
		{
			img: '/static/manage/livestock.png',
			title: '牧场信息',
			path: 'pages/management/child/ranch/Ranch'
		},
		{
			img: '/static/manage/video.png',
			title: '视频监控',
			path: 'pages/home/Monitor'
		},
		{
			img: '/static/manage/alarm.png',
			title: '报警记录',
			path: 'pages/home/Andetails'
		}
	];

	const fetchData = async () => {
		const res = await HealthInfo()
		data.value = res.data
	};
	
		
	onMounted(()=>{
		fetchData()
	})
</script>

<style scoped>
	@import '@/static/iconfont/iconfont.css';

	.Management {
		width: 100%;
		height: 100vh;
		background-color: #F5F7FA;
	}

	.Management-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		margin-top: -270rpx;
	}

	.Management-header-left {
		margin-left: 40rpx;
		display: flex;
		align-items: center;
	}

	.Management-header-left-item {
		height: 125rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		font-size: 40rpx;
	}

	.Management-header-right {
		margin-right: 40rpx;
	}

	.Management-header-Data {
		width: 90%;
		height: 185rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.Management-header-Data-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.Management-center {
		width: 100%;
		height: 340rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		margin-top: 40rpx;
	}

	.Management-center-btn {
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
</style>